<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>

<div th:fragment="content">
    <div id="app" class="content_container">
        <div v-for="item in gridData.records" class="post" >
            <h2 class="post-title"><a
                    href="https://www.haomwei.com/emotion/summer.html">{{ item.title }}</a></h2>
            <div class="post-meta">{{item.createTime | moment}}</div>
            <div
                    class="post-content">
                {{ item.content }}
            </div>
            <p class="readmore"><a href="https://www.haomwei.com/emotion/summer.html">阅读更多</a></p>
        </div>
        <nav class="page-navigator">
            <a class="extend prev" v-if="gridData.current != 1" v-on:click="getCustomers(index)" rel="prev">上一页</a>
            <template v-for="index in gridData.pages" >
                <span class="space" v-if="index == 1 && gridData.current > 5" >…</span>
                <template v-else>
                <span class="space" v-if="index == gridData.pages-2 && gridData.current < gridData.pages-5" >…</span>
                    <template v-else>
                <span class="page-number" v-if="index == 0 " v-on:click="getCustomers(index+1)">{{index+1}}</span>
                        <template v-else>
                <span class="page-number" v-if="index == gridData.pages-1 " v-on:click="getCustomers(index+1)">{{index+1}}</span>
                            <template v-else>
                <span class="page-number" v-if="(index > gridData.current -3) && (index < gridData.current +3) && !(index == 0) && !(index == gridData.pages-1)" v-on:click="getCustomers(index+1)">{{index+1}}</span>
                            </template>
                        </template>
                    </template>
                </template>

            </template>
            <a class="extend next" v-if="gridData.current != gridData.pages" v-on:click="getCustomers(index+2)" rel="next">下一页</a>
        </nav>
    </div>

    <script th:inline="javascript">

        var demo = new Vue({
            el: '#app',
            data: {
                gridData: [],
                apiUrl: /*[[@{/list/}]]*/
            },
            ready: function() {
                this.getCustomers(0)
            },
            methods: {
                getCustomers: function(page) {
                    this.$http.get(this.apiUrl+page)
                            .then((response) => {
                        this.$set('gridData', response.data)
                }).catch(function(response) {
                        console.log(response)
                    })
                }
            }
        })

        Vue.filter('moment', function (value, formatString) {
            formatString = formatString || 'YYYY年MM月DD日';
            return moment(value).format(formatString);
        });
    </script>

</div>

</body>

</html>